// 车险投保方案
<template>
<c-form-block-container title='投保方案'>
    
    <!-- 表单按键 -->
    <div class="plan-header" slot='header'  v-show='showSyDetails'>
        <c-btn-icon class="btn" type='danger text' icon='icon-close' @click='cancel'></c-btn-icon>
        <c-btn-icon class="btn" type='primary text' icon='icon-complete' @click='enter'></c-btn-icon>
    </div>
    
    <div class="plan">
        
        <div class="plan-content" v-show='!showSyDetails'>
            <Row :gutter='10'>
                <Col :span='mod.span' v-for='(mod, index) in mods' :key='index'>

                    <h2 class="title">
                        {{mod.title}}
                    </h2>
                
                    <div class="plan-content">
                        <Form label-position='left' :label-width='mod.labelWidth || 72'>  
                            <Row :gutter='mod.gutter'>
                                <Col :span='item.span' v-for='(item, index) of mod.conf' :key='item.key'>
                                    <FormItem :label='item.label'>
                                        <component v-model="newData[item.key]" 
                                        :is="item.component" 
                                        :conf='item.conf'>
                                        </component>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </div>
                </Col>

                
                <!-- 商险表单 -->
                <Col  :span='syPlanConf.span' >

                    <h2 class="title">
                        {{syPlanConf.title}}
                    </h2>
                
                    <div class="plan-content">
                        <Form label-position='left' :label-width='syPlanConf.labelWidth || 72'>  
                            <Row :gutter='syPlanConf.gutter'>
                                <Col :span='syPlanConf.conf.span'>
                                    <FormItem :label='syPlanConf.conf.label'>

                                        <component 
                                        v-model="newData[syPlanConf.conf.key]" 
                                        :is="syPlanConf.conf.component"  
                                        :conf='syPlanConf.conf.conf'>
                                        </component>
                                        
                                            <Button class='ivu-btn-icon-only btn-more' type='text' size='small' @click='syDetailsSwitch("open")'>
                                                <Icon class='iconfont icon-morevert'></Icon>
                                                <span class="tips">
                                                    详情
                                                </span>
                                            </Button>

                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </div>
                </Col>
                
            </Row>
        </div>
        

        <!-- 商业险配置表单 -->
        <transition name='up-down'>
            <div class="sy-plan" v-show='showSyDetails'>
                <l-car-sy-plan :data='syDetailsData'></l-car-sy-plan>
            </div>
        </transition>
        
    </div>

    
</c-form-block-container>
</template>

<script lang='ts'>

import { Component, Prop, Watch, Vue } from 'vue-property-decorator'

import carSyPlanForm from '@/components/ivew_components/car_sy_plan/index.vue'
import parckComponent from '@/components/ivew_components/parck_components/index'
import insuracneCompany from '@/components/ivew_conf/insurance_company'
import * as syConf from '@/components/ivew_conf/car_sy_plan'
import { deepCopy } from '@/utils/tools'
import {store} from '@/store/index'


@Component({
    
    components:{
        'l-car-sy-plan': carSyPlanForm
    }
    
})
export default class carPlan extends Vue{
    name:string='car-plan'
    
    // 车险订单数据
    @Prop()
    data:internalInf.carOrderAPI
    
    @Watch('syDetailsClass')
    onSyDetailsClassChange(newVal,oldVal){
        
        this.update()
        
        if(this.classLock){
            this.syDetailsSwitch('open')
        }

        this.syDetailsClassLock = 'open';
        
    }

    @Watch('data')
    onDataChange(newVal, oldVal){
        let syClass = this.comparison(newVal.DEVsyRiskTable)
        
        //更新表格数据类型
       this.syDetailsClassLock = 'close'      
       this.newData.syDetailsClass = syConf.preAPI[syClass];
    }

    // 商险方案
    syConf = syConf
    syDetails:any = {}                          //商险表单数据缓存
    syDetailsClassLock:string = 'close'         //类型锁, 判断是否手动切换到 “自定义”类型，跳出配置明细界面
    syDetailsClass:string = '自定义'             //商险表单状态
    syDetailsStatus:string = 'close'             //是否显示商险表单 open | close
    syDetailsPreConf = syConf.preConfList()     //预设列表

    // 显示商险明细
    get showSyDetails (){
        return this.syDetailsStatus === 'open';
    }

    get classLock (){
        return this.syDetailsClassLock === 'open';
    }

    // 商险数据
    get syDetailsData():formInf.syData[]{
        return this.syConf.getPreConfItem(this.syDetailsClass, this.syDetailsPreConf)
    }

    mods = {

        jq:  {
            title: '交强险',
            span: 24,
            gutter: 10,
            conf:[

                {
                    label: '交强险',
                    span: 5,
                    component: parckComponent('checkbox'),
                    conf: {
                        size: 'small',
                    },
                    key: 'DEVpickJq'
                },
                {
                    label: '承保公司',
                    span: 10,
                    component: parckComponent('select'),
                    conf: {
                        size: 'small',
                        options: insuracneCompany,

                        // 选项联动
                        onChange(arg){
                            store.state['carFormStore']['orderData']['DEVsyViCompany'] =  arg
                        }
                    },
                    key: 'DEVjqViCompany'
                },
                {
                    label: '起保时间',
                    span: 9,
                    component: parckComponent('datePicker'),
                    conf:{
                        size: 'small',
                        placement: 'left-start',
                        format: 'yyyy/MM/dd',
                    },
                    key: 'DEVjqStartDate'
                }
            
            ]
        },

        sy:  {
            title: '商业险',
            span: 24,
            gutter: 10,
            conf:[
                {
                    label: '商业险',
                    span: 5,
                    component: parckComponent('checkbox'),
                    conf: {
                        size: 'small',
                    },
                    key: 'DEVpickSy'
                },
                 {
                    label: '承保公司',
                    span: 10,
                    component: parckComponent('select'),
                    conf: {
                        size: 'small',
                        options: insuracneCompany,
                        
                         // 选项联动
                        onChange(arg){
                            store.state['carFormStore']['orderData']['DEVjqViCompany'] =  arg
                        }
                    },
                    key: 'DEVsyViCompany'
                },
                {
                    label: '起保时间',
                    span: 9,
                    component: parckComponent('datePicker'),
                    conf:{
                        size: 'small',
                        placement: 'left-start',
                        format: 'yyyy/MM/dd',
                    },
                    key: 'DEVsyStartDate'
                },
                
            ]
        },

    }

    syPlanConf = {
        title: '商险方案',
        span:24,
        conf: {
                label: '配置项',
                span: 24,
                component: parckComponent('radioGroup'),
                conf:{
                    size: 'small',
                    radios: this.syConf.preConfClass(),
                    type: 'button'
                },
                key: 'syDetailsClass'
        }
        
    }

    // 包装数据（添加原接口不具备的属性值, syDetailsClass, 需要传入实例对象）
    newData:any = this.creatNewData(['syDetailsClass', 'syDetailsStatus'], this)

    // 包装数据
    creatNewData (keys:string[], vue){
        let _this = this;
        let packObj = {};
        
        keys.forEach(key=>{
            packObj[key] = vue[key]
        })

        return new Proxy(packObj, {

            get(target, property, receiver){
                return Object.assign(target, _this.data)[property]
            },

            set(target, property, value, receiver){
                let data:any = _this.data.hasOwnProperty(property) ? _this.data : _this;
                data[property] = value;
                return Reflect.set(target, property, value);
            }

        })

    }

    // 数据比对, 是否匹配预设项
    comparison(data, hasSourceData:boolean = true):string{
        let syDetailsPreConf = this.syDetailsPreConf;
        let template = JSON.stringify(data);
        let syClass = 'self';
        let keys = Object.keys(syDetailsPreConf);
        
        if(hasSourceData){
            syDetailsPreConf.self = data;
        }

        keys.reverse();

        for(let key of keys){
            let source = JSON.stringify(syDetailsPreConf[key]);
            if(source === template){
                syClass = key;
                break;
            }

        }
        
       return syClass
    }

    // 表单切换开关 
    syDetailsSwitch(status:string){
        if(status){
             this.syDetailsStatus = status     
        }else{
            this.syDetailsStatus = this.syDetailsStatus === 'open' ? 'close' : 'open';
        }
    }

    // 更新数据
    update(){
        let syDetailsData = this.syConf.getPreConfItem(this.syDetailsClass, this.syDetailsPreConf);
        this.data.DEVsyRiskTable = syDetailsData
    }   

    // 表单取消
    cancel(){
        this.reset();
        this.syDetailsSwitch('close');
    }

    // 表单确认
    enter(){
        this.update()
        this.cancel()
    }

    // 重置预设项
    reset(){
        this.syDetailsPreConf = syConf.preConfList()
        let syClass = this.comparison(this.data.DEVsyRiskTable)
        
        // 改变配置类型时, 加类型锁, 防止重复触发显示 配置表单,
        if(syConf.preAPI[syClass] !== this.newData.syDetailsClass){
            this.syDetailsClassLock = 'close';
        }
        
        this.newData.syDetailsClass = syConf.preAPI[syClass];

        
    }

}


</script>

<style scoped lang='scss'>

.plan{
    position: relative;
    height: 100%;
    min-height: _rem(270px);
}

.title{
    position: relative;
    margin-bottom: _rem(10px);
    padding-left: _rem(4px);
    font-size: $font_small;


    &::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;

        margin: auto;
        width: _rem(2px);
        border-radius: $border_radius;
        height:  50%;
        background: $main_color;
    }

}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.plan-content{
    padding-left: _rem(6px);
}

.sy-plan{
    @extend %position_center;
    min-height: _rem(270px);
    z-index: 99;
}

.btn-more{
    
    &:hover .tips{
        opacity: 1;
    }

    .tips{
        opacity: 0;
        transition: $transition_time;
    }
}
</style>